<template>
  <div class="orders-container">
    <div class="orders-header">
      <h1>我的订单</h1>
      <p>查看您的景点预约订单详情</p>
    </div>

    <div class="orders-content">
      <el-card v-if="orders.length === 0" class="empty-card">
        <div class="empty-state">
          <i class="fas fa-clipboard-list"></i>
          <h3>暂无订单</h3>
          <p>您还没有任何景点预约订单</p>
          <el-button type="primary" @click="goToSiteView">去预约景点</el-button>
        </div>
      </el-card>

      <div v-else class="orders-list">
        <el-card v-for="order in orders" :key="order.id" class="order-card">
          <div class="order-header">
            <div class="order-info">
              <h3>{{ order.scenicSpotName }}</h3>
              <span class="order-id">订单号: {{ order.id }}</span>
            </div>
            <el-tag :type="getStatusType(order.status)">{{ getStatusText(order.status) }}</el-tag>
          </div>

          <div class="order-details">
            <div class="detail-item">
              <i class="fas fa-calendar-alt"></i>
              <span>预约时间: {{ formatDate(order.visitDate) }} {{ order.visitTime }}</span>
            </div>
            <div class="detail-item">
              <i class="fas fa-users"></i>
              <span>预约人数: {{ order.visitorCount }} 人</span>
            </div>
            <div class="detail-item">
              <i class="fas fa-user"></i>
              <span>预约人: {{ order.visitorName }} ({{ order.visitorPhone }})</span>
            </div>
            <div class="detail-item">
              <i class="fas fa-ticket-alt"></i>
              <span>票价类型: {{ order.ticketType }}</span>
            </div>
            <div class="detail-item">
              <i class="fas fa-money-bill-wave"></i>
              <span>总金额: ¥{{ order.totalAmount }}</span>
            </div>
          </div>

          <div class="order-actions">
            <el-button v-if="order.status === 'pending'" type="primary" size="small" @click="payOrder(order)">立即支付</el-button>
            <el-button v-if="order.status === 'paid'" type="success" size="small" disabled>已支付</el-button>
            <el-button v-if="order.status === 'cancelled'" type="info" size="small" disabled>已取消</el-button>
            <el-button type="default" size="small" @click="viewOrderDetail(order)">查看详情</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElLoading } from 'element-plus'
import { getOrders } from '@/api/orders'

export default {
  name: 'OrdersView',
  setup() {
    const router = useRouter()
    const orders = ref([])
    const loading = ref(true)

    // 模拟订单数据
    const mockOrders = [
      {
        id: 'ORD20241215001',
        scenicSpotName: '三坊七巷',
        visitDate: '2024-12-20',
        visitTime: '09:00-12:00',
        visitorCount: 2,
        visitorName: '张三',
        visitorPhone: '13800138000',
        ticketType: '成人票',
        totalAmount: '120.00',
        status: 'paid'
      },
      {
        id: 'ORD20241215002',
        scenicSpotName: '鼓山',
        visitDate: '2024-12-22',
        visitTime: '13:00-16:00',
        visitorCount: 1,
        visitorName: '张三',
        visitorPhone: '13800138000',
        ticketType: '学生票',
        totalAmount: '40.00',
        status: 'pending'
      }
    ]

    const fetchOrders = async () => {
      const loadingInstance = ElLoading.service({ 
        lock: true, 
        text: '加载订单中...' 
      })
      
      try {
        // 调用API获取用户订单
        // 在实际项目中，这里应该获取当前登录用户的ID
        const response = await getOrders('current-user-id')
        orders.value = response.data
        loading.value = false
      } catch (error) {
        ElMessage.error('获取订单失败')
        // 失败时使用模拟数据
        orders.value = mockOrders
      } finally {
        loading.value = false
        loadingInstance.close()
      }
    }

    const getStatusType = (status) => {
      const statusMap = {
        pending: 'warning',
        paid: 'success',
        cancelled: 'info'
      }
      return statusMap[status] || 'info'
    }

    const getStatusText = (status) => {
      const statusTextMap = {
        pending: '待支付',
        paid: '已支付',
        cancelled: '已取消'
      }
      return statusTextMap[status] || '未知状态'
    }

    const formatDate = (dateString) => {
      return new Date(dateString).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    }

    const viewOrderDetail = (order) => {
      ElMessage.info(`查看订单详情: ${order.id}`)
      // 这里可以跳转到订单详情页面
    }

    const goToSiteView = () => {
      router.push('/site')
    }

    const payOrder = async (order) => {
      try {
        ElMessage.info('模拟支付流程...')
        // 在实际项目中，这里应该调用支付API
        order.status = 'paid'
        ElMessage.success('支付成功')
      } catch (error) {
        ElMessage.error('支付失败')
      }
    }

    onMounted(() => {
      fetchOrders()
    })

    return {
      orders,
      loading,
      getStatusType,
      getStatusText,
      formatDate,
      viewOrderDetail,
      goToSiteView
    }
  }
}
</script>

<style scoped>
.orders-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  background-color: #f8f9fa;
}

.orders-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
}

.orders-header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.orders-header p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.orders-content {
  padding: 20px;
}

.empty-card {
  text-align: center;
  padding: 60px 20px;
}

.empty-state i {
  font-size: 4rem;
  color: #ddd;
  margin-bottom: 20px;
}

.empty-state h3 {
  color: #666;
  margin-bottom: 10px;
}

.empty-state p {
  color: #999;
  margin-bottom: 30px;
}

.orders-list {
  display: grid;
  gap: 20px;
}

.order-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.order-info h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1.3rem;
}

.order-id {
  color: #666;
  font-size: 0.9rem;
}

.order-details {
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #555;
}

.detail-item i {
  width: 20px;
  margin-right: 12px;
  color: #667eea;
}

.order-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

@media (max-width: 768px) {
  .orders-container {
    padding: 10px;
  }
  
  .orders-header {
    padding: 30px 20px;
  }
  
  .orders-header h1 {
    font-size: 2rem;
  }
  
  .order-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .order-actions {
    flex-wrap: wrap;
  }
}
</style>